﻿/*----------------------------------------------------------
CMAT UI web set css
----------------------------------------------------------*/

/*default  setting
----------------------------------*/
* { font-family: "Segoe UI Light" , "Microsoft YaHei" ,Verdanal,Arial,sans-serif; font-size: 14px; }
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { padding: 0; margin: 0; }
table { border-collapse: collapse; border-spacing: 0; }
fieldset, img { border: 0; }
address, caption, cite, code, dfn, em, strong, th, var { font-weight: normal; font-style: normal; }
caption, th { text-align: left; }
q:before, q:after { content: ''; }
abbr, acronym { border: 0; }
a { text-decoration: none; }
body { min-width: 1000px; }

/*common animation for img
----------------------------------*/
img { -moz-opacity: .9; opacity: .9; filter: alpha(opacity=90); }
img:hover { cursor: pointer; -moz-opacity: 1; opacity: 1; filter: alpha(opacity=100); }

/*common important*/
.hide { display: none !important; }
.visible { visibility: hidden !important; }

/*common clear*/
.clear { clear: both; display: block; overflow: hidden; width: 0; height: 0; }
.clear-border { border: 0 none #fff !important; }
.clear-box { padding: 0; margin: 0; border-style: none; outline-style: none; }
.clear-background { background: transparent none no-repeat 0 0xp; }
.clear-liststyle { list-style: none !important; }
.clear-opacity { -moz-opacity: 1 !important; opacity: 1 !important; filter: alpha(opacity=100); }

/*opacity*/
.opacity-0 { -moz-opacity: 0; opacity: 0; filter: alpha(opacity=0); }
.opacity-1 { -moz-opacity: .1; opacity: .1; filter: alpha(opacity=10); }
.opacity-2 { -moz-opacity: .2; opacity: .2; filter: alpha(opacity=20); }
.opacity-3 { -moz-opacity: .3; opacity: .3; filter: alpha(opacity=30); }
.opacity-4 { -moz-opacity: .4; opacity: .4; filter: alpha(opacity=40); }
.opacity-5 { -moz-opacity: .5; opacity: .5; filter: alpha(opacity=50); }
.opacity-6 { -moz-opacity: .6; opacity: .6; filter: alpha(opacity=60); }
.opacity-7 { -moz-opacity: .7; opacity: .7; filter: alpha(opacity=70); }
.opacity-8 { -moz-opacity: .8; opacity: .8; filter: alpha(opacity=80); }
.opacity-9 { -moz-opacity: .9; opacity: .9; filter: alpha(opacity=90); }
.opacity-10 { -moz-opacity: 1; opacity: 1; filter: alpha(opacity=100); }

/*normal layout*/
.section { margin-top: 10px; padding: 10px; }
.section-tittle { line-height: 2em; font-weight: bold; border-bottom: 1px dashed #fff; }
.section-info { line-height: 1.5em; }
.section-tip { line-height: 1.2em; font-size: 0.8em; }

/*float layout*/
.float-2 .content { float: left; width: 50%; }
.float-3 .content { float: left; width: 33%; }
.float-4 .content { float: left; width: 25%; }
.float-5 .content { float: left; width: 20%; }
.float-left { float: left; }
.float-right { float: right; }

/*group  layout*/
ul.group, ul.group-left, ul.group-right { list-style: none; }
ul.group-left li { float: left; }
ul.group-right li { float: right; margin-right: 10px; }

/*absolute layout*/
.relative { position: relative; }

/*common link*/
.link:link { text-decoration: none; }
.link:visited { text-decoration: none; }
.link:hover { cursor: pointer; }
.link:active { text-decoration: none; }
.link-img:hover { -moz-opacity: .8; opacity: .8; filter: alpha(opacity=80); }

.link-highlight { text-decoration: none; color: #883388; padding-bottom: 1px; border-bottom: 1px dashed transparent; }
.link-highlight:visited { text-decoration: none; }
.link-highlight:hover { border-bottom: 1px dashed #883388 !important; }
.link-highlight:active { text-decoration: none; }

/*common header*/
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-family: "Segoe UI" , "Microsoft YaHei" ,Verdanal,Arial,sans-serif; font-weight: bold; text-indent: 1em; border-bottom: 2px solid #eee; line-height: 1.5em; overflow: hidden; text-overflow: ellipsis; }
h1, .h1 { font-size: 26px; }
h2, .h1 { font-size: 22px; }
h3, .h1 { font-size: 18px; }
h4, .h1 { font-size: 16px; }
h5, .h1 { font-size: 14px; }
h6, .h1 { font-size: 12px; }

/*common margin*/
.top-big { margin-top: 50px; }
.top-middle { margin-top: 30px; }
.top-small { margin-top: 10px; }
.bottom-big { margin-bottom: 50px; }
.bottom-middle { margin-bottom: 30px; }
.bottom-small { margin-bottom: 10px; }

/*common text*/
.t1 { font-size: 24px; }
.t2 { font-size: 20px; }
.t3 { font-size: 16px; }
.t4 { font-size: 14px; }
.t5 { font-size: 12px; }
.t6 { font-size: 11px; }
.t1, .t2, .t3, .t4, .t5, .t6, .text-error, .text-nowrap, .text-important, .text-tip, .text-light, .text-highlight, .text-title { overflow: hidden; text-overflow: ellipsis; line-height: 1.5em; }
.text-nowrap { width: 100%; white-space: nowrap; }
.text-success { color: #0a0 !important; }
.text-error { color: #db0039 !important; }
.text-important { color: #000 !important; font-weight: bold; }
.text-tip { color: #aaa; }
.text-light { color: #ccc !important; }
.text-info { color: #555 !important; }
.text-highlight { color: #1196ee !important; }
.text-case { color: #ffc600 !important; }
.text-title { line-height: 2em; height: 2em; color: #fff !important; }
.bg-light { background-color: #1196ee; color: #fff; }
.bg-dark { background-color: #3370cc; color: #fff; }
.bg-black { background-color: #333; color: #fff; }

/*common border*/
.border-img { background-color: #eee; padding: 2px; border: 1px solid #ccc; border-radius: 5px; }
.border-box { border: 1px solid #eee; border-radius: 5px; }
.border-box-hovor { border: 1px solid #fff; border-radius: 5px; }
.border-box-hovor:hover { border: 1px solid #eee !important; }


/*common shadow*/
.line-top { padding-top: 20px; border-top: 1px solid #eee; margin-top: 20px; }

/*common icons*/
.icon { background-position: left center; background-repeat: no-repeat; }
.icon-close { background-image: url('images/icon-close.png'); }
.icon-cmat { background-image: url('images/icon-cmat.png'); }
.icon-date { background-image: url('images/icon-date.png'); }
.icon-email { background-image: url('images/icon-email-light.png'); }
.icon-ok { background-image: url('images/icon-ok.png'); }
.icon-passed { background-image: url('images/icon-passed.png'); }
.icon-pdf { background-image: url('images/icon-pdf.png'); }
.icon-search { background-image: url('images/icon-search.png'); }
.icon-add-dark { background-image: url('images/icon-add-dark.png'); }
.icon-add-light { background-image: url('images/icon-add-light.png'); }
.icon-cancel-dark { background-image: url('images/icon-cancel-dark.png'); }
.icon-cancel-light { background-image: url('images/icon-cancel-light.png'); }
.icon-change-light { background-image: url('images/icon-change-light.png'); }
.icon-down-light { background-image: url('images/icon-down-light.png'); }
.icon-edit-dark { background-image: url('images/icon-edit-dark.png'); }
.icon-edit-light { background-image: url('images/icon-edit-light.png'); }
.icon-export-dark { background-image: url('images/icon-export-dark.png'); }
.icon-history-light { background-image: url('images/icon-history-light.png'); }
.icon-history-dark { background-image: url('images/icon-history-dark.png'); }
.icon-left-light { background-image: url('images/icon-left-light.png'); }
.icon-license-light { background-image: url('images/icon-license-light.png'); }
.icon-offset-dark { background-image: url('images/icon-offset-dark.png'); }
.icon-offset-light { background-image: url('images/icon-offset-light.png'); }
.icon-process-dark { background-image: url('images/icon-process-dark.png'); }
.icon-purchase-dark { background-image: url('images/icon-purchase-dark.png'); }
.icon-remove-dark { background-image: url('images/icon-remove-dark.png'); }
.icon-right-light { background-image: url('images/icon-right-light.png'); }
.icon-seachaccount-light { background-image: url('images/icon-seachaccount-light.png'); }
.icon-switch-light { background-image: url('images/icon-switch-light.png'); }
.icon-up-light { background-image: url('images/icon-up-light.png'); }
.icon-update-dark { background-image: url('images/icon-update-dark.png'); }
.icon-violation-light { background-image: url('images/icon-violation-dark.png'); }

/*common control*/
.cui { float: left; border: 5px solid transparent; border-radius: 5px; }

.cui-textbox { border-color: #ccc; }
.cui-textbox:hover { border-color: #adf; }
.cui-textbox input { padding: 5px; background-color: #333; border: none; color: #eee; font-size: 14px; cursor: pointer; }

.cui-textarea { border: 5px solid #ccc; }
.cui-textarea:hover { border-color: #adf; }
.cui-textarea textarea { padding: 5px; background-color: #333; border: none; color: #eee; font-size: 14px; cursor: pointer; overflow-x: auto; overflow-y: auto; }

.cui-dropdownList { border: 5px solid #ccc; border-radius: 5px; }
.cui-dropdownList:hover { border-color: #adf; }
.cui-dropdownList select { padding: 5px; background-color: #333; border: none; color: #eee; font-size: 14px; cursor: pointer; }

.cui-button { border: 5px solid #ccc; border-radius: 5px; min-width: 60px; background-color: #333; }
.cui-button:hover { border-color: #adf; background-color: #222; }
.cui-button a { padding: 0 25px; line-height: 30px; height: 30px; border: none; color: #eee; font-size: 14px; cursor: pointer; }

.cui-checkbox input, .cui-checkbox label { line-height: 30px; height: 30px; padding: 0 5px; cursor: pointer; }

.cui-radio input, .cui-radio label { line-height: 30px; height: 30px; padding: 0 5px; cursor: pointer; }

.cui-error { border-color: #d66 !important; }

.cui-submitform { margin-top: 10px; padding: 10px; }
.cui-submitform .cui { margin: 5px; }
.tip { color: #999 !important; }
/*Header*/
#header { padding-top: 10px; }
#logo { height: 30px; line-height: 30px; margin-left: 20px; float: left; }
#logo img { height: 30px; }

#menu { float: right; }
#menu ul { }
#menu li { height: 30px; padding-top: 5px; }
#menu a { font-size: 16px; padding: 0 20px; color: #eee; }
#menu a.icon-search { background-position: center center; }
#menu li:hover { background-color: #fff; }
#menu li:hover a { color: #333; }

#mainmenu { height: 80px; }
#mainmenu ul { margin-top: 30px; }
#mainmenu li { margin-left: 20px; }
#mainmenu li a { font-size: 24px; color: #1196ee; }
/*Right sider*/
#rightsider { background-color: #333; color: #eee; height: 1000px; width: 500px; border-left: 20px solid #ccc; cursor: pointer; }
